<template>
  <div style="height: 680px; display: flex; flex-direction: column;">
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="height: 50px; line-height: 50px;;" >
      <el-form-item label="设备" >
        <el-select
          v-model="queryParams.deviceId"
          clearable
          filterable
          remote
          placeholder="输入设备名称进行搜索"
          remote-show-suffix
          :remote-method="getEquipmentList"
          :loading="equipmentLoading"
          @change="getReportRecordList" 
        >
          <el-option v-for="item in equipmentList" :key="item.deviceId" :label="item.equipmentName" :value="item.deviceId" />
        </el-select>
      </el-form-item>
      <el-form-item label="上报时间">
        <el-date-picker
          v-model="queryParams.date"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="getReportRecordList" 
        />
      </el-form-item>
      <el-form-item style="margin-left: 30px;">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="height: calc(100% - 50px); display: flex; flex-direction: column;">
      <el-table v-loading="reportRecordLoading" :data="reportRecordList" style="flex: 1" >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="告警事件ID" align="center" prop="alarmEventID" min-width="100px" show-overflow-tooltip />
        <el-table-column label="设备名称" align="center" prop="alarmInName" min-width="160px" show-overflow-tooltip />
        <el-table-column label="告警类型" align="center" prop="alarmType" min-width="220px" show-overflow-tooltip />
        <el-table-column label="告警首次发生时间" align="center" prop="occurTime" min-width="180px" show-overflow-tooltip />
        <el-table-column label="告警发生次数" align="center" prop="occurNumber" min-width="100px" show-overflow-tooltip />
      </el-table>

      <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getReportRecordList" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import request from '@/utils/request'
import { listEquipmentInfo, delEquipmentInfo } from '@/api/facility/equipment-info'
import { parseTime } from '@/utils/linx';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['close']);

/** 获取设备上报记录 */
const queryFormRef = ref<ElFormInstance>()
const queryParams = ref<any>({ pageNum: 1, pageSize: 20, modelId: null, deviceId: null, date: [parseTime(new Date(), '{y}-{m}-{d} 00:00:00'), parseTime(new Date(), '{y}-{m}-{d} 23:59:59')] })
const reportRecordList = ref([])
const reportRecordLoading = ref(false)
const total = ref(0)
const getReportRecordList = () => {
  queryParams.value.startTime = queryParams.value.date ? queryParams.value.date[0] : null
  queryParams.value.endTime = queryParams.value.date ? queryParams.value.date[1] : null
  reportRecordLoading.value = true
  request({
    url: '/open/ivs3800/get-alarm-event-list',
    method: 'get',
    params: queryParams.value
  }).then((res: any) => {
    console.log('获取设备上报记录', res)

    reportRecordList.value = res.data.alarmEventList?.map((item: any) => { return item.alarmNotify })
    total.value = res.data.pageInfo.realNum
  }).finally(() => { reportRecordLoading.value = false })
}

/** 查询设备信息列表 */
const equipmentLoading = ref(false)
const equipmentList = ref([])
const getEquipmentList = async (query: string) => {
  equipmentLoading.value = true
  const res = await listEquipmentInfo({ pageNum: 1, pageSize: 10, productId: queryParams.value.modelId, equipmentName: query }).finally(() => equipmentLoading.value = false)
  console.log('获取设备列表：', res)

  equipmentList.value = res.rows
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getReportRecordList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = { pageNum: 1, pageSize: 20 }
  handleQuery()
}

onMounted(()=>{
  getReportRecordList()
})
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
    margin-right: 10px;
}
</style>

